<%@ page language="java"
         contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"
         import="com.shxt.hotel.background.Room"
         import="com.shxt.hotel.background.User"
         import="java.util.List"
         import="java.util.Map"
%>
<%
    Room room = new Room();
    User user = new User();
    
    Map<String, Object> currentUser;
    
    if(session.getAttribute("id") == null){
        response.sendRedirect("./login.jsp");
    }else{
        request.setCharacterEncoding("UTF-8");
        int category_id = Integer.parseInt((String)request.getParameter("id"));
    
        currentUser = user.getUserInfo((int)session.getAttribute("id"));
        Map<String, Object> userPerm = user.getPermission((int)currentUser.get("user_permission"));
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <link rel="shortcut icon" href="../Public/img/favicon.html">

    <title>Hotel Booking</title>

    <!-- Bootstrap core CSS -->
    <link href="../Public/css/bootstrap.min.css" rel="stylesheet">
    <link href="../Public/css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="../Public/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <link rel="stylesheet" type="text/css" href="../Public/assets/bootstrap-datepicker/css/datepicker.css" />
    <link rel="stylesheet" type="text/css" href="../Public/assets/bootstrap-colorpicker/css/colorpicker.css" />
    <link rel="stylesheet" type="text/css" href="../Public/assets/bootstrap-daterangepicker/daterangepicker.css" />

    <!-- Custom styles for this template -->
    <link href="../Public/css/style.css" rel="stylesheet">
    <link href="../Public/css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="../Public/js/html5shiv.js"></script>
      <script src="../Public/js/respond.min.js"></script>
    <![endif]-->


</head>

<body>

    <section id="container" class="">
        <!--header start-->
        <jsp:include page="./Public/header.jsp" flush="true"/>
        <!--header end-->
        <!--sidebar start-->
        <jsp:include page="./Public/sidebar.jsp" flush="true"/>
        <!--sidebar end-->
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper">
                <!-- page start-->
                <div class="row">
                    <div class="col-lg-12">
                        <%
                            // room_rec
                            // Map<String, Object> room_rec = room.getRoom(Integer.parseInt(rid));
                            
                            // int cid = (Integer)room_rec.get("category");
                            // cate_rec
                            List<Map<String, Object>> categoryList = room.getCategories("*");
                            Map<String, Object> cate_rec = categoryList.get((int)category_id);
                            
                        %>
                        <form class="form-horizontal" role="form" action="./background/hotel_booking_do.jsp" method="post">
                        
                        <!-- hidden input -->
                        <input type="hidden" name="uid" value='<%=currentUser.get("id") %>'>
                        <input type="hidden" name="cid" value='<%=cate_rec.get("id") %>'>
                        <input id="date-range-left-date" type="hidden" name="create_date" value="">
                        <input id="date-range-right-date" type="hidden" name="end_date" value="">
                        <%
                            double init_price = (float)cate_rec.get("price") * (100 - (int)userPerm.get("room_discount")) / 100;
                        %>
                        <input id="room_book_price" type="hidden" name="deposit" value='<%=String.format("%.2f", init_price) %>'>
                        <input id="room_book_total_time" type="hidden" name="total_time" value="1">
                        
                        <!-- Room Booking panel -->
                        <section class="panel panel-primary">
                            <header class="panel-heading">Room Booking</header>
                            <div class="panel-body">
                            
                                <div class="form-group">
                                    <label for="inputEmail1" class="col-lg-2 control-label">Room Type</label>
                                    <div class="col-lg-10">
                                        <p class="form-control-static"><%=cate_rec.get("title") %></p>
                                    </div>
                                </div>
                                <!-- date ranges -->
                                <div class="form-group">
                                    <label class="control-label col-lg-2">Date Ranges</label>
                                    <div class="col-lg-3">
                                        <div class="input-prepend">
                                            <input id="reservation" type="text" class="form-control" autocomplete="off"/>
                                        </div>
                                    </div>
                                </div>
                                <!-- room booking number -->
                                <div class="form-group">
                                    <label class="control-label col-lg-2">Num</label>
                                    <div class="col-lg-3">
                                        <select id="room_book_book_num" name="book_num" class="form-control m-bot15" onchange="modifyTotalCost()">
                                            <%
                                                int roomRow = room.getCategoryRoomNum(category_id);
                                                for(int i = 1; i <= roomRow; i++){
                                                    out.println("<option value='" + i + "'>" + i + "</option>");
                                                }
                                            %>
                                            <!--<option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>-->
                                        </select>
                                    </div>
                                </div>
                                <!-- total cost -->
                                <div class="form-group">
                                    <label class="control-label col-lg-2">Total Cost</label>
                                    <div class="col-lg-3">
                                        <p class="form-control-static text-danger">
                                            <span>$ </span>
                                            <span id="room_book_total_cost"><%=init_price %></span>
                                            &nbsp;&nbsp;&nbsp;
                                            <%
                                                if((int)userPerm.get("id") != 0){ 
                                            %>
                                                <span class="label label-danger">VIP&nbsp;-<%=userPerm.get("room_discount") %>%</span>
                                            <%
                                                }
                                            %>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Room Info end -->
                        
                        <!-- User Info -->
                        <section class="panel">
                            <header class="panel-heading">User Info</header>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label class="col-lg-2 control-label">User ID</label>
                                    <div class="col-lg-10">
                                        <p class="form-control-static">Hugo Hoo</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-2 control-label">Phone</label>
                                    <div class="col-lg-10">
                                        <p class="form-control-static">13839162771</p>
                                    </div>
                                </div>
                                
                                <br>
                                <div class="form-group">
                                    <div class="col-lg-offset-2 col-lg-10">
                                        <button type="submit" class="btn btn-info">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </section>
                        </form>
                    </div>
                </div>
                <!-- page end-->
            </section>
        </section>
        <!--main content end-->
    </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="../Public/js/jquery.js"></script>
    <script src="../Public/js/bootstrap.min.js"></script>
    <script src="../Public/js/jquery.scrollTo.min.js"></script>
    <script src="../Public/js/jquery.nicescroll.js" type="text/javascript"></script>

    <script src="../Public/js/jquery-ui-1.9.2.custom.min.js"></script>

    <!--custom switch-->
    <script src="../Public/js/bootstrap-switch.js"></script>
    <!--custom tagsinput-->
    <script src="../Public/js/jquery.tagsinput.js"></script>
    <!--custom checkbox & radio-->
    <script type="text/javascript" src="../Public/js/ga.js"></script>

    <script type="text/javascript" src="../Public/assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="../Public/assets/bootstrap-daterangepicker/date.js"></script>
    <script type="text/javascript" src="../Public/assets/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script type="text/javascript" src="../Public/assets/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
    <script type="text/javascript" src="../Public/assets/ckeditor/ckeditor.js"></script>


    <!--common script for all pages-->
    <script src="../Public/js/common-scripts.js"></script>

    <!--script for this page-->
    <script src="../Public/js/form-component.js"></script>
    
    <script>
        $(document).ready(function(){
            $("#Hotel_Service").addClass("active");
            $("#hotel_booking").addClass("active");
            $("#date-range-left-date").val(homeBookGetDate());
            $("#date-range-right-date").val(homeBookGetDate());
            
            $("#reservation").val(homeBookGetDate() + " : " + homeBookGetDate());
        });
        
        function modifyTotalCost(){
            // book num 
            var bookNum = $("#room_book_book_num").val();
            var totalCostElem = document.getElementById("room_book_total_cost");
            var price = $("#room_book_price").val();
            var total_time = $("#room_book_total_time").val();
            totalCostElem.innerText = (price * bookNum * total_time).toFixed(2);
            
            // date range
            // var dateRange = $("#reservation").val();
            // alert(dateRange);            
        }
        
        function homeBookGetDate(){
            var date = new Date();
            return "" + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        }
        
    </script>

</body>

</html>

<%
    }
    room.close();
%>